<template>
  <div class="biaoge">
        <div class="operate_inputs">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="手机号:">
                    <el-input class='smbtn' v-model="formInline.username_kw"></el-input>
                </el-form-item>
                 <el-form-item label="昵称:">
                    <el-input class='smbtn' v-model="formInline.nickname_kw"></el-input>
                </el-form-item>
                <el-form-item label="所属状态:">
                    <el-select class='smbtn' v-model="formInline.status" placeholder="全部">
                        <el-option v-for="(p,j) in status" :key='j' :label="p.attriname" :value="p.attriid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if='xxSelect' >
                    <el-select class='smbtn' v-model="formInline.agentid" placeholder="线下校列表">
                        <el-option  v-for="(a,i) in agents" :key='i' :label="a.nickname" :value="a.userid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button class="search_btn" type="primary" @click="getData(true)"><i class="el-icon-search"></i>查询</el-button>
                    <el-button class="reset_btn" type="primary" @click="clearSearch"><i class="el-icon-refresh"></i>清空查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table
            v-loading="loading2"
            element-loading-text="加载中..."
            :data="studentsData"
            stripe 
            size="mini"
            border resizable
            style="width: 100%"
            :height="tableHeight">
            <el-table-column label="注册时间" :align="align">
                <template slot-scope="scope">{{scope.row.regdate | transData}} </template>
                <!-- <template slot-scope="scope">{{Number(scope.row.regdate) | dateForm}} </template> -->
            </el-table-column>
            <el-table-column label="学员账号" :align="align">
                <template slot-scope="scope">{{scope.row.username}}</template>
            </el-table-column>
            <el-table-column label="学员昵称" :align="align">
                <template slot-scope="scope">{{scope.row.nickname}}</template>
            </el-table-column>
            <el-table-column label="妈妈姓名" :align="align">
                <template slot-scope="scope">{{scope.row.memberchild ? scope.row.memberchild.mumname:''}}</template>
            </el-table-column>
            <el-table-column label="妈妈手机" :align="align">
                <template slot-scope="scope">{{scope.row.memberchild ? scope.row.memberchild.mummobile:''}}</template>
            </el-table-column>
            <el-table-column label="学员状态" :align="align">
                <template slot-scope="scope" v-if='scope.row.attrinfo'>{{scope.row.attrinfo.attriname}}</template>
            </el-table-column>
            <el-table-column label="录入人" :align="align">
                <template slot-scope="scope">{{scope.row.agentAddPersonName}}</template>
            </el-table-column>

            <el-table-column 
                fixed="right" 
                :align="align"
                min-width="100"
                :data="studentsData"
                label="分配销售">
                <template slot-scope="scope">
                    <el-select class='divided_4' 
                        @change="saleChange('cc',scope.row.ccid,scope.row.userid)" filterable v-model="scope.row.ccid" size='mini'>
                        <el-option v-for='(sale,i) in saleList'
                            :key="sale.userid"
                            :label="sale.realname?sale.realname:' '"
                            :value-key='i'
                            :value="sale.userid" ></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column 
                fixed="right" 
                :align="align"
                min-width="100"
                :data="studentsData"
                label="分配中教">
                <template slot-scope="scope">
                   <el-select class='divided_4' 
                    @change="saleChange('cr',scope.row.crid,scope.row.userid)" filterable v-model="scope.row.crid" size='mini'>
                        <el-option v-for='(assitant,j) in assistantList'
                            :key="j"
                            :label="assitant.realname?assitant.realname:assitant.username"
                            :value="assitant.userid"></el-option>
                    </el-select>
                </template>
            </el-table-column>
        </el-table>
        <div class="page_block">
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="15"
                small
                layout="prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
        </div>
  </div>
</template>

<script>
    import base from '../api/base.js'
    import md5 from 'js-md5'
    import {formatDate} from '../../static/js/date.js'
    export default {
        data() {
            return {
                tableHeight:window.innerHeight-300,
                loading2:true,
                loading3:true,
                relation:1,
                status:[],
                agents:[],
                assistantList:[],
                saleList:[],
                formInline: {
                    username_kw: '',
                    nickname_kw:'',
                    status:'',
                    agentid: '',
                },
                ifchild:'',
                userid:'',//选中的学员
                columWidth:170,
                align:'center',
                studentsData: [],
                // 分页数据
                currentPage: 1,
                totalCount:0,
                cur_page:1,
                page_size:15,
                //添加
                xxSelect:false,
                agentId:[]//分配的助教或销售id
            }
        },
        methods: {
            handleCurrentChange(val) {
                this.loading2=true
                this.cur_page=val;
                this.getData();
            },
            saleChange(role,cid,uid){
                this.$axios({
                    url: base.baseUrl+"/school/member/assign-student",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token: localStorage.token,
                        role:role,
                        studentId:uid,
                        agentId:cid,
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    this.alertTip(res.data.msg)
 
                });
            },
            getData(cr){ 
                if(cr){
                    this.currentPage=1
                    this.cur_page=1
                }
                this.$axios({
                    url: base.baseUrl+"/school/member/get-member-list",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token: localStorage.token,
                        p:this.cur_page,
                        page_size:this.page_size,
                        nickname_kw:this.formInline.nickname_kw,
                        username_kw:this.formInline.username_kw,
                        status:this.formInline.status,
                        agentid:this.formInline.agentid,
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==-1){
                        this.alertTip(res.data.msg)
                    }else if(res.data.code==200){
                        
                        this.studentsData=res.data.data.member_list;
                        this.loading2=false
                        this.totalCount=Number(res.data.data.pages.total_count);
                    }else if(res.data.code==-2){
                        this.$router.push('/login')
                    }
                });
            },
            clearSearch(){
                this.formInline.agentid=''
                this.formInline.status=''
                this.formInline.username_kw=''
                this.formInline.nickname_kw=''
                this.getData()
            },
            alertTip(msg){
                this.$alert(msg, '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                        });
                    }
                });
            },
            getAssistant(){
                this.$axios({
                    url: base.baseUrl+"/school/agent/get-role-name",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token: localStorage.token,
                        role:2,
                        relation:this.relation
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==200){
                        this.assistantList=res.data.data;
                    }else if(res.data.code==-2){
                        this.$router.push('/login');
                    }
                });
            },
            getSaleList(){
                this.$axios({
                    url: base.baseUrl+"/school/agent/get-role-name",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token: localStorage.token,
                        role:18,
                        relation:this.relation
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==200){
                        this.saleList=res.data.data;
                    }else if(res.data.code==-2){
                        this.$router.push('/login');
                    }
                });
            },
            getStatus(){
                this.$axios({
                    url: base.baseUrl+"/school/member/get-member-status-list",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token: localStorage.token
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==200){
                        this.status=res.data.data;
                    }else if(res.data.code==-2){
                        this.$router.push('/login');
                    }
                });
            },
            getAgents(){
                this.$axios({
                    url: base.baseUrl+"/school/agent/get-agent-list",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token: localStorage.token
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==200){
                        this.agents=res.data.data;
                    }else if(res.data.code==-2){
                        this.$router.push('/login');
                    }
                });
            },
            ifShowxianxia(){
                if(localStorage.roleid==10||localStorage.roleid==12||localStorage.roleid==13||localStorage.roleid==14||localStorage.roleid==15){
                    this.xxSelect=true
                }
            }
        },
        filters:{
            transData(time){
                return formatDate(new Date(time * 1000), 'yyyy-MM-dd hh:mm');
            }
        },
        created(){
            this.getData()
            this.getAssistant();
            this.getSaleList()
            this.ifShowxianxia()
            this.getStatus();
            this.getAgents()
        }  
  }

</script>
<style lang="less" scoped>
@media screen and (max-width:1700px){
    .el-form--inline{
        width: 1400px;
    }  
    .smbtn{
        width: 160px!important;
    }
}
@media screen and (max-width:1460px){
    .smbtn{
        width: 132px!important;
    }
    .search_btn{
        width: 80px!important;
    }  
    .reset_btn{
        width: 100px!important;
    }
    .operate_inputs{
        padding: 15px 0!important;
    }
}
.operate_inputs{
    padding: 15px 30px;
    height: 70px;
    box-sizing: border-box;
    button{
        width: 130px;
        height: 38px;
        border-radius: 4px;
        border: none;
    }
    .search_btn{       
        background-color: #ff5263;
    }
    .reset_btn{
        background-color: #808080;
    }
}
.page_block{
    position: absolute;
    margin-top:12px;
    right: 5%;
}
.recordStyle{
    width: 100%;
    text-align: center;
    margin: 10px 0 30px 40px;
}
</style>


